<template>
  <div class="ip-view common-flex-align-center">
    <template v-for="(data, i) in list" :key="i">
      <t-input
        v-model="data.value"
        :type="item.inputType || 'text'"
        :placeholder="item.placeholder"
        :clearable="item.clearable"
        @change="handleChange"
      />
      <div v-if="i !== list.length - 1" class="colon">:</div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  item: {
    type: Object as any,
    default: () => {
      return [];
    },
  },
  modelValue: {
    type: String,
    default: '',
  },
});

const emits = defineEmits(['change', 'update:modelValue']);

const list = ref([{ value: '' }, { value: '' }, { value: '' }, { value: '' }]);

const handleChange = () => {
  const str = list.value.map((item: any) => item.value).join('.');
  emits('change', str);
  emits('update:modelValue', str);
};

watch(
  () => props.modelValue,
  (str) => {
    if (!str) return;
    const arr = str.split('.');
    list.value = list.value.map((item: any, index: number) => {
      item.value = arr[index];
      return item;
    });
  },
  { immediate: true },
);
</script>

<style lang="less" scoped>
.ip-view {
  .t-input__wrap {
    width: 50px;

    :deep(.t-input) {
      min-width: auto !important;

      .t-input__inner {
        text-align: center;
      }
    }
  }

  .colon {
    color: #9e9e9e;
  }
}
</style>
